<script setup lang="ts">
import type {Dropdownprops,DropdownEmits,DropdownInstance, MenuOption} from './types'
import Tooltip from '../Tooltip/Tooltip.vue';
import type{ TooltipInstance } from '../Tooltip/type';
import {ref,type Ref} from 'vue'
// tooltips 的配置项
import type { Options } from '@popperjs/core';

const props = defineProps<Dropdownprops>()
const emits = defineEmits<DropdownEmits>()
// tooltips 组件实例
const tooltipRef = ref<TooltipInstance>()
// 向外暴露的其实是 tooltips 的 实例的方法
defineExpose<DropdownInstance>({
  hide:() => tooltipRef.value!.hide(),
  show:() => tooltipRef.value!.show(),
})
// visible-change 事件是tooltips 的。dropdown 是作为中介传出 visible-change 事件，
const visibleChange = (value:boolean)=>{
  emits('visible-change',value)
}
// 点击菜单项事件：将点击的菜单项的内容返回出去
const itemClick = (e:MenuOption)=>{
  // 点击到的是disable的节点：什么都不做
  if(e.disabled)return
  emits('select',e)
}
const options : Partial<Options> ={strategy:"fixed"}

</script>
<template>
  <div class="wk-dropdown"> 
    <Tooltip
    :manual="false"  
    :popperOptions="options"
    @visible-change="visibleChange"
    ref="tooltipRef"
    >
      <!-- 触发层 -->
      <slot></slot>
      <!-- 显示层 -->
      <template #content>
        <ul class="wk-dropdown_menu">
          <template v-for="item in props.menuOptions" :key="item.key">
          <li 
            v-if="item.divided"
            role="separator"
            class="divided-placeholder"
          />
          <li
            class="wk-dropdown_item"          
            :class="{'is-disabled':item.disabled,'is-divided':item.divided}"
            :id="`dropdown-item-${item.key}`"
            @click="$event => itemClick(item)"
          > 
            {{ item.label }}
          </li>
          </template>
        </ul>
      </template>
    </Tooltip>
  </div>

</template>